<template>
  <div class="box">
    <router-link replace to="geren">
      <span class="aaa">
        <van-icon name="arrow-left" />
      </span>
    </router-link>
    <h3>个人信息</h3>
    <van-cell-group>
      <input type="file" hidden accept="image/*" id="file" @change="change">

      <van-cell title="头像" center>
        <label for="file">
          <van-image width="50" height="50" round fit="cover" :src="userInfo.avatar" />
        </label>
      </van-cell>

      <!-- 修改昵称 -->
      <van-cell title="昵称" is-link :value="name || userInfo.nickname" @click="showPopups" />

      <!-- 弹出层 -->
      <van-popup v-model="shows" style="width:100%;">
        <div class="names">
          <h4>请输入新的昵称</h4>
          <input type="text" v-model="name">
          <van-button type="primary" @click="done" style="margin-top:25px" color="#81b073" size="normal">确认</van-button>
        </div>
      </van-popup>

      <!-- 选择性别 -->
      <van-cell title="性别" @click="showPicker = true" is-link :value="value || userInfo.sex" />
      <!-- <van-field readonly clickable is-link name="picker" :value="value || '请选择性别' " :placeholder="userInfo.sex || '请选择性别'" label="性别"
        @click="showPicker = true" /> -->
      <van-popup v-model="showPicker" position="bottom">
        <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
      </van-popup>

      <!-- 选择生日 -->
      <van-cell title="生日" @click="showPopup" is-link :value="values || userInfo.birthday" />
      <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker v-model="currentDate" @confirm="ui" type="date" title="选择生日" :min-date="minDate"
          :max-date="maxDate" />
      </van-popup>
    </van-cell-group>

    <!-- 点击修改 -->
    <van-button type="primary" size="large" color="#3399ff" @click="revise" style="width:100%">修改信息</van-button>
  </div>
</template>

<script>
import { RadioGroup, Radio, Uploader, Calendar, Dialog, Cell, CellGroup, Image as VanImage, Picker, DatetimePicker, Notify } from 'vant';
import { mapState, mapActions } from 'vuex';
const moment = require('moment')

export default {
  components: {
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [Uploader.name]: Uploader,
    [Calendar.name]: Calendar,
    [Dialog.Component.name]: Dialog.Component,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [VanImage.name]: VanImage,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Notify.Component.name]: Notify.Component,
  },

  data() {
    return {
      userInfo: {},  //修改的值
      name: '',      //修改昵称的值
      date: '',
      value: '',     //性别
      values: '',    //生日
      columns: ['男', '女'],
      showPicker: false,
      show: false,
      shows: false,
      minDate: new Date(1990, 1, 0),
      maxDate: new Date(),
      currentDate: '',
    }
  },
  created() {
    this.userInfo = JSON.parse(JSON.stringify(this.$store.state.userInfo))
    console.log(this.userInfo)
  },
  computed: {
    ...mapState(['uid'])
  },
  methods: {
    // 调接口
    revise() {
      this.$http.post('/user/editUserInfo', {
        avatar: this.userInfo.avatar,
        nickname: this.name,
        sex: this.value,
        birthday: this.values,
        uid: this.uid
      }).then((res) => {
        console.log(res);
        console.log(res.data.data)
        this.userInfo.nickname = this.name

        if (res.data.code == 0) {
          Notify({ type: 'success', message: res.data.msg });

          let userInfo = { 'avatar': this.userInfo.avatar, 'nickname': this.name, 'sex': this.value, 'birthday': this.values };
          // 存储到本地
          localStorage.setItem('num', JSON.stringify(userInfo));
          // 上传到vuex
          this.$store.commit('exist', ['userInfo', userInfo]);
        }
      }).catch(err => {
        console.log(err);
        console.log(this.uid)
      })
    },
    // 转换时间
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    // 上传头像
    ...mapActions(['upload']),

    async change(e) {
      // console.log(e.target.files)

      let fileList = ([...e.target.files]).map(v => {
        return {
          file: v
        }
      })
      let [avatar] = await this.upload(fileList);
      console.log(avatar)
      this.userInfo.avatar = avatar
    },

    // 昵称弹出层
    showPopups() {
      this.shows = true
    },
    // 昵称弹出框
    done() {
      this.shows = false
    },
    // 性别弹出层
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    // 生日弹出层
    showPopup() {
      this.show = true;
    },
    // 日期确认框
    ui() {
      this.show = false;
      const a = moment(this.currentDate).format('YYYY-MM-DD')
      this.values = a
    }
  },
}
</script>

<style scoped>
.van-button::before {
  text-align: center;
  /* color: #81b073; */
}

.names {
  height: 180px;
  text-align: center;
}

.names h3 {
  color: gray;
}

.names input {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  height: 30px;
}

.aaa {
  font-size: 18px;
  color: white;
  line-height: 55px;
  float: left;
  padding-left: 10px;
}

.box {
  width: 100%;
  height: 55px;
  background-color: #3399ff;
}

.box h3 {
  margin: 0;
  padding: 0;
  line-height: 55px;
  color: white;
  text-align: center;
}
</style>